<template>
  <div>
    <!-- 
      需求：小选框都选中，全选框自动选中
      1、布局
      2、动态渲染列表（双向绑定复选框）
      3、定义计算属性，用来绑定全选框，计算属性的值根据小选框的状态返回true或false
     -->
    <span>全选:</span>
    <input v-model="checkedAll" type="checkbox" />
    <button>反选</button>
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        <input v-model="item.c" type="checkbox" />
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
  computed: {
    checkedAll() {
      // 统计小选框是否全部选中，如果是则返回true，否则返回false
      // every() // 当every方法中的条件语句都成立的时候则返回true，只有一个条件不符合则返回false
      /**
       * every语法：
       * arr.every((item)=>{
       *  // item指的就是数组的中的元素
       *  // 这里可以做条件判断，数组中的所有元素都符合条件则返回true，否则返回false
       *    return 条件
       * })
       *
       * */
      return this.arr.every((item) => {
        return item.c === true;
      });
    },
  },
};
</script>

<style>
</style>